class Collapse extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "open" });

    const tmpl = document.getElementById("collapse_tmpl");

    let cloneTmpl = tmpl.content.cloneNode(true);

    let style = document.createElement("style");

    style.textContent = `
      :host{
        display: flex;
        border: 3px solid #ebebeb;
        border-radius: 5px;
        width: 100%
      }
      .heli-collapse{
        width: 100%;
      }
    `;
    // style.textContent = `
    //   heli-collapse{ // 该元素中没有heli-collapse中的item，所以作用不到
    //     display: flex;
    //   }
    // `;
    shadow.appendChild(style);
    shadow.appendChild(cloneTmpl)

    let slot = shadow.querySelector("slot");

    slot.addEventListener("slotchange", (e) => {
      this.slotList = e.target.assignedElements();
      this.render();
    })
  }

  static get observedAttributes() {
    // 监控属性的变化
    return ["active"];
  }

  // 生命周期回调 一个四个方法
  connectedCallback() {
    console.log("当自定义元素第一次被连接到文档DOM时被调用。");
  }
  disconnectedCallback() {
    console.log("当自定义元素与文档DOM断开连接时被调用。");
  }
  adoptedCallback() {
    console.log("当自定义元素被移动到新文档时被调用。");
  }
  // update
  attributeChangedCallback(key, oldValue, newValue) {
    console.log("当自定义元素的一个属性被增加、移除或更改时被调用。");
    if (key == "active") {
      // console.log(oldValue, newValue);
      this.activeList = JSON.parse(newValue);
      this.render();
    }
  }

  render() {
    // console.log(this.activeList);
    if (this.slotList && this.activeList) {
      [...this.slotList].forEach(child => {
        child.setAttribute("active", JSON.stringify(this.activeList))
      })
    }
  }
}

export default Collapse;